<template>
	<view style="background-color: rgba(0, 0, 0, 0.05);">
		<fui-sticky>
			<view class="statusBarHeight" :style="'height:' + menuButtonInfo.top + 'px'"></view>
			<!-- <view class="tittle row" :style="'height:' + statusBarHeight + 'px'">
        </view> -->
			<fui-notice-bar :padding="['0','15rpx']" background='#f0f0f0' :height="statusBarHeight*2" :content="content"
				scrollable :bold='true' color="#465CFF">
				<view class="fui-icon__box">
					<fui-icon name="notice" :size="36" color="#465CFF"></fui-icon>
				</view>
			</fui-notice-bar>
			<!-- <fui-search-bar paddingLr='10' :height="statusBarHeight*2" inputBackground="#fff" background="#f0f0f0" radius="15" searchColor="#FFB703"  @search="search"></fui-search-bar> -->

		</fui-sticky>
		<!-- 通告栏 -->


		<!-- 瀑布流主体 -->
		<fui-waterfall leftGap='10' rightGap="10" topGap="10" columnGap="10" @end="end()" @init="init()" @resetLoadmore="Refresh()">
			<fui-waterfall-item v-for="(item,index) in data" :key="index" background="#fff" :imgWidth="0">

				<view class="top row ">
					<fui-avatar :src="item.avatar" width="60" shape="square"></fui-avatar>
					<view class="win_right row column ">
						<text class="name_tex">
							{{ item.username.replace(/\[@emoji.*?\]/g, '') }}
						</text>
						<text class="time_tex">
							{{ item.createTime + '发布' }}
						</text>
					</view>

				</view>

				<!-- <view class="top row items" style="padding: 8rpx 20rpx;border-bottom: #f1f4fa solid 1px;">
					<fui-overflow-hidden :text="'来自:'+item.groups.group_name.replace(/\[@emoji.*?\]/g, '')"
						color="rgba(0, 0, 0, 0.4);" :size="20" width="100%" fontWeight="400"></fui-overflow-hidden>

				</view> -->
				<view class="allcex">
					<view class="cex" v-for="(mitem,mindex) in item.content" :key="mindex">
						<fui-text v-if="mitem.type=='text'" :text="mitem.text" :size="34" :selectable="true"
							:unShrink="false"></fui-text>
						<!-- <text class="tex" v-if="mitem.type=='text'" selectable='true'	>{{ mitem.text }}</text> -->
						<fui-text v-if="mitem.type=='phone'" :block="true" color="#0d57d6" :highlight="true"
							:call="call" text-type="mobile" :format="format" :text="mitem.text" :size="34"
							:unShrink="false"></fui-text>
						<!-- <text class="phone" v-if="mitem.type=='phone'" @click="makeCall(mitem.text)">{{ mitem.text }}</text> -->

					</view>
				</view>
			</fui-waterfall-item>

		</fui-waterfall>
		<fui-backtop custom :scrollTop="scrollTop" bottom="200">
			<fui-icon name="up" :size="52"></fui-icon>
		</fui-backtop>
		<fui-modal :buttons="buttons" width="600" :show="modalShow" maskClosable @cancel="onCancel" @click="onClick">
			<!-- <fui-icon name="checkbox-fill" :size="108" color="#FFB703"></fui-icon> -->
			<fui-lottie v-if="modalShow == true" v :width="600" :height="400" :options="option"
				:action="action"></fui-lottie>
			<text class="fui-title">未登录</text>
			<text class="fui-descr">请点击蓝色按钮跳转登录后享受完整服务</text>

		</fui-modal>

		<fui-bottom-navbar :items="options" :isFixed="true" @init="BottomInit" @click="BottomClick" left="8"
			fontWeight='500' background="#f8f8f8"></fui-bottom-navbar>
	</view>
</template>

<script>
	import {
		chatMessageList,
		userInfo
	} from 'common/api'
	const app = getApp()
	export default {
		data() {
			return {
				modalShow: false,
				buttons: [],
				option: {
					path: 'https://assistant.qmtruck.com/static/images/icon/quanxian.json'
				},
				action: 'play',
				// 以上是交互反馈参数
				scrollTop: 0,
				options: [{
					text: '刷新数据',
					name: 'refresh',
					size: 32
				}, {
					text: '货车定位',
					name: 'wechat',
					size: 32
				}],
				windowHeight: app.windowHeight,
				statusBarHeight: app.globalData.menuButtonInfo.height,
				menuButtonInfo: app.globalData.menuButtonInfo,
				data: [],
				content: '本软件开发目的是帮助物流从业人员了解行情价格，请广大用户联系时谨慎对待，本软件不承担任何法律责任',
				formData: {
					content: '',
					limit: 10,
					index: 1
				},
				// 数据脱敏
				format: true,
				call: false
			};
		},
		onLoad() {
			console.log(app.globalData)
			let that = this;
			let needRegister = this.$store.state.needRegister;
			if (needRegister) {
				that.format = true;
				that.call = false;
			} else {
				that.format = false;
				that.call = true;
			}
			userInfo()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop

		},
		onPullDownRefresh() {
			// 模拟异步请求数据
			setTimeout(() => {
				// 在这里调用接口获取数据
				// 数据获取成功后，停止下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom(e) {
			let that = this;
			let needRegister = this.$store.state.needRegister;
			if (that.formData.index < 3) {
				that.formData.index++
				that.init()
			} else {
				if (needRegister) {
					that.modalShow = true
					that.buttons = [{
						text: '关闭！',
						color: '#6c98f8',
						background: '#f6f8fc'
					}, {
						text: '去登录',
						color: '#f6f8fc',
						background: '#6c98f8'
					}]
				} else {
					that.formData.index++
					that.init()
				}
			}


		},
		methods: {

			//关闭模态框
			onCancel(e) {
				this.modalShow = false
			},
			onClick(e) {
				console.log(e)
				if (e.index == 0) {
					this.modalShow = false
				} else if (e.index == 1) {
					uni.redirectTo({
						url: "/pages/login/login"
					})
				}
			},
			BottomInit(e) {
				this.height = Math.ceil(e.height / e.windowWidth * 750)
			},
			BottomClick(e) {
				console.log(e)
				let that = this;
				if (e.index === 0) {
					that.data = []
					that.Refresh()
				} else if (e.index === 1) {
					uni.navigateToMiniProgram({
						appId: 'wx2b59d93cc87023f1',
						success(res) {
							// 打开成功
						}
					})
				} else if (e.index === 2) {
					uni.navigateTo({
						url: '/pages/Upthewall/Upthewall'
					})
				}
			},
			// 刷新数据
			Refresh(e) {
				uni.redirectTo({
				  url: '/pages/info/info',
				  success: function(res) {
				    console.log('页面刷新成功');
				  },
				  fail: function(res) {
				    console.log('页面刷新失败');
				  }
				})
			},
			init(e) {
				let that = this
				console.log(that.formData.limit, that.formData.index)
				let arr = []
				chatMessageList({
					'limit': that.formData.limit,
					'page': that.formData.index
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						let arr = res.data;
						let processed = [];
						for (let i = 0; i < arr.length - 1; i++) {
							if (arr[i].message == arr[i + 1].message) {
								continue;
							} else {
								if (arr[i].group_id != 0) {
									that.data.push({
										'hasBeenSentId': arr[i].id,
										'content': that.parseMessage(arr[i].message),
										'username': arr[i].type == 0 ? arr[i].user.username : arr[i].robot
											.username,
										'avatar': arr[i].type == 0 ? arr[i].user.userpic : arr[i].robot
											.avatar,
										'isItMe': arr[i].type,
										// 'createTime':that.getDateDiff(new Date(arr[i].created_at).getTime()) ,
										'createTime': app.commentTimeHandle(arr[i].created_at),
										'groups': arr[i].groups
									})
								} else {
									console.log(arr[i])
								}
							}

						}

					}
				})
			},
			// 加载更多项
			end(e) {
				console.log("加载更多项")
			},

			// 内容解析函数
			parseMessage(str) {
				const regPhone = /(1\d{10})/
				const list = str.split(regPhone)
				const result = []
				return list.map(c => {
					let tag
					regPhone.test(c) ? tag = 'phone' : tag = 'text'
					return {
						type: tag,
						text: c
					}
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
	@import './index.scss';
</style>